<template>
  <div class="app-container" v-if="formData">
    <el-carousel :height="carouselHeight">
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <div class="image-container" :style="{ backgroundImage: `url('${image}')` }"></div>
      </el-carousel-item>
    </el-carousel>
    <el-row :gutter="15" class="menu">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="活动名称" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="暂无活动名称"
              :disabled="true"
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业名称" prop="firmName">
            <el-input
              v-model="formData.firmName"
              placeholder="暂无企业名称"
              :disabled="true"
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="beginTime">
            <el-input
              v-model="formData.beginTime"
              placeholder="暂无开始时间"
              :disabled="true"
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime">
            <el-input
              v-model="formData.endTime"
              placeholder="暂无结束时间"
              :disabled="true"
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人姓名" prop="username">
            <el-input
              v-model="formData.username"
              placeholder="暂无负责人姓名"
              :disabled="true"
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="formData.phone"
              placeholder="暂无联系电话"
              :disabled="true"
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动简介" prop="text">
            <el-input
              v-model="formData.text"
              type="textarea"
              placeholder="暂无活动简介"
              :disabled="true"
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  listActivity,
  getActivity,
  delActivity,
  addActivity,
  updateActivity
} from '@/api/village/activity'

export default {
  name: 'activitiesdetails',
  data() {
    return {
      // 保存从路由传递过来的数据对象
      id: null,
      // 保存图片的URL数组，初始值为空数组
      images: [],
      // 用于设置轮播图的高度
      carouselHeight: '500px',
      // 表单数据对象
      formData: null,
      // 验证规则
      rules: {
        field106: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        field107: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        field102: [
          { required: true, message: '请输入开始时间', trigger: 'blur' }
        ],
        field103: [
          { required: true, message: '请输入结束时间', trigger: 'blur' }
        ],
        field105: [
          { required: true, message: '请输入负责人姓名', trigger: 'blur' }
        ],
        field104: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        field108: [
          { required: true, message: '请输入活动简介', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 其他方法可以在这里定义
    getDetail() {
      getActivity(this.$route.query.id).then(res => {
        this.form = res.data
        this.images = res.data.image.split(',').map(item => process.env.VUE_APP_BASE_API + item)
        this.formData = res.data
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  width: 100%;
}

.image-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.menu {
  margin-top: 3vh;
}


</style>
<style>
.el-input.is-disabled .el-input__inner {
  color: #000000;
}

.el-textarea.is-disabled .el-textarea__inner {
  color: #000000;
}
</style>
